<template>
	<view style="position: relative;">
		<u-notice-bar :text="text1"></u-notice-bar>
		<!-- 搜索框 -->
		<!-- 	<view>222</view> -->
		<!-- <view class="search" :class="{'active':opticon}"
			:style="{paddingTop:height,backgroundColor:'rgba(255,255,255,'+opation+')'}">
			<input type="text" placeholder="搜索产品" class="input" disabled @click="toUrl('/subPages/search/search')">
			<text class="iconfont icon-sousuo"></text>
			<view class="cart" @click="toUrl('/pages/cart/cart')">
				<view class="number" v-if="number">{{number}}</view>
				<img src="/static/images/index/cart.png" alt="" style="width: 40rpx;height: 40rpx;">
			</view>
		</view> -->
		<view class="" :style="{position: 'relative'}">
			<view class="dian">
				<view :class="index == active ? 'li active':'li'" v-for="(item, index) in imgs" :key="index"></view>
			</view>
			<swiper autoplay="true" indicator-dots="false" indicator-active-color="#ffffff"
				style="height: 380rpx;position: relative;" @change="change" :indicator-dots="false">

				<swiper-item v-for="(item, index) in imgs" :key="index" v-if="item.image">
					<view class="swiper-text">
					</view>
					<!-- 	<button class="swiper-play" open-type="contact">立即咨询</button> -->
					<!-- <view  @click="goto(item.jumpurl)">立即咨询</view> -->
					<image :src="item.image" style="width: 100%;height: 100%;" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<!-- 	<image src="" mode=""></image> -->
		</view>
		<view class="flex-box">
			<view class="box" @click="toUrl('/subPages/clasSingle/clasSingle?id=6')">
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">关于我们</view>
			</view>
			<view class="box" @click="toUrl('/subPages/clasSingle/clasSingle?id=7')">
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">企业文化</view>
			</view>
			<view class="box">
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">未来规划</view>
			</view>
			<view class="box" style="position: relative;">
				<button type="default" open-type="contact"
					style="position: absolute;width: 100%;height: 100%;opacity: 0;"></button>
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">联系客服</view>
			</view>
			<view class="box" @click="toUrl1('/pages/classify/classify')">
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">商城小程序</view>
			</view>
			<view class="box" @click="toUrl('/subPages/goodDetails/goodDetails?id=103')">
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">app定制</view>
			</view>
			<view class="box" @click="toUrl1('/pages/classify/classify')">
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">社区团购</view>
			</view>
			<view class="box" @click="toUrl1('/pages/classify/classify')">
				<view class="top">
					<image src="../../static/tabbar/home.png"></image>
				</view>
				<view class="bottom">微商城</view>
			</view>
		</view>
		<view class="">
			<view style="margin-top: 30rpx;padding: 0 200rpx;">
				<u-divider text="服务详情" lineColor="#839e58f7"></u-divider>
			</view>
			<!-- 
			<view class="box-header">
				<view class="box-header-left">六好商品上新</view>
			</view> -->

			<view class="new-list">

				<view class="box" v-for="item in zhutuigood" @click="goto(item.id)">
					<view class="top"><img :src="'https://shop.jslhkj.cn'+item.topimge" alt=""></view>
					<view class="bottom">
						<view class="h">{{item.h}}</view>
						<view class="t">{{item.name}}</view>
						<view class="btn" :style="{backgroundColor:item.background}">
							<view class="left" style="font-size: 24rpx;">￥{{item.price}} 起</view>
							<!-- 	<view>
								<button class="right" open-type="contact">立即咨询</button>
							</view> -->

							<view class="right">联系客服</view>
						</view>
					</view>
				</view>
			</view>
		</view>



		<!-- 排行榜 -->


		<!--  -->
		<view class="code">
			<image src="https://www.jslhkj.cn/static/upload/image/20230915/1694743568914355.jpg" mode=""
				style="width: 600rpx;height:780rpx ;margin: 0 auto;" :show-menu-by-longpress='true'></image>
			<view class="bt_code">长按识别二维码</view>
		</view>





	</view>

</template>

<script>
	export default {
		data() {
			return {
				number: '',
				cats: [],
				active: 0,
				navs: [],
				imgs: [],
				ms: [],
				wapFloatData: '',
				templateData: [],
				uid: 0,
				videoT: [],
				height: 0,
				zhutuigood: [],
				opation: 0,
				cats2: [],
				cats3: [],
				cate5: [],
				threshold: 30,
				cate6: [],
				text1: '六好科技专注做软件开发与小程序开发'
			}

		},
		onPageScroll(e) {
			if (e.scrollTop <= this.threshold) {
				this.opation = 0;
			} else {
				const opacity = (e.scrollTop - this.threshold) / this.threshold;
				this.opation = opacity < 1 ? opacity : 1;
			}

			// console.log();
			// if (e.scrollTop > 30) {
			// 	if (this.opation >= 1) {
			// 		return false
			// 	}
			// 	this.opation = this.opation + 0.01
			// } else if (e.scrollTop < 150) {
			// 	this.opation = this.opation - 0.01
			// }

		},
		async onLoad() {
			let cate6 = await this.$api.getgoodcate({
				status: '3'
			})
			this.cate6 = cate6.data.goods.data
			let cate = await this.$api.getgoodcate({
				status: '2'
			})
			console.log(cate);
			this.cats2 = cate.data.goods.data.sort(this.compare('pay_num')).reverse()
			// let r = this.cats2
			// console.log(r.reverse());
			let cate3 = await this.$api.getgoodcate({
				status: '4'
			})
			this.cats3 = cate3.data.goods.data
			console.log(cate3);
			// console.log(cate);
			let ca = await this.$api.getcategoods({
				cate_id: '73'
			})
			this.cate5 = ca.data.data
			console.log(ca);
			let shop = await this.$api.getzhutuigood({})
			this.zhutuigood = shop.data
			// 获取距上
			const barTop = wx.getSystemInfoSync().statusBarHeight
			// 获取胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			// 获取导航栏高度
			// const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2

			const height = (menuButtonInfo.top) * 2
			this.height = height + 'rpx'
			console.log(height);
			console.log(wx.getMenuButtonBoundingClientRect());
			let res = await this.$api.getbanner({})
			// console.log(res);
			this.imgs = res.data
			let videoT = await this.$api.getbannervideo({})
			// console.log(videoT);
			this.videoT = videoT.data

			// let res1 = await this.$api.getcategory({})
			// let carNumber = await this.$api.getCartList({})

			// let number = 0
			// carNumber.data.forEach(v => {

			// 	number += v.num
			// })
			// this.number = number
			// this.cats = res1.data

			// let res1 = await this.$api.getbanner({})
			// console.log(res1);

		},
		methods: {
			cok(msg) {
				console.log(msg);
			},
			createComprisonFunction(prop) {
				return function(obj1, obj2) {
					var val1 = obj1[prop];
					var val2 = obj2[prop];
					if (val1 < val2) {
						return -1;
					} else if (val1 > val2) {
						return 1;
					} else {
						return 0;
					}
				}
			},
			toUrl(item) {
				uni.navigateTo({
					url: item
				})
			},

			goto(id) {
				uni.navigateTo({
					url: '/subPages/goodDetails/goodDetails?id=' + id
				})
			},
			change(e) {
				this.active = e.detail.current
			},
			toUrl1(item) {
				uni.switchTab({
					url: item
				})
			},
			compare(property) {
				return function(obj1, obj2) {
					var value1 = obj1[property];
					var value2 = obj2[property];
					return value1 - value2; // 升序
				}
			}


			// move(e) {
			// 	console.log(e);
			// }
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.flex-box {
		padding: 0 20rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 30rpx 30rpx;
		margin-top: 50rpx;

		.box {
			text-align: center;
			font-size: 24rpx;

			.top {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.code {
		text-align: center;
		background-color: #fff;
		position: relative;

		.bt_code {
			position: absolute;
			bottom: 20rpx;
			border: 2rpx solid red;
			border-radius: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 26rpx;
			padding: 10rpx;
			color: red;
		}
	}

	.xpss-name {
		font-size: 25rpx;
		font-weight: 700;
		margin-bottom: 40rpx;
	}

	.swiper-play {
		position: absolute;
		left: 40rpx;
		bottom: 50rpx;
		font-size: 22rpx;
		text-align: center;
		border-radius: 100rpx;
		width: 170rpx;
		line-height: 55rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, .85);
	}

	.swiper-text {
		width: 400rpx;
		position: absolute;
		left: 40rpx;
		top: 180rpx;
	}

	.card {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 0;
		background: #6c6f6433;
		border-radius: 8px;
		-webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, rgb(89, 96, 72) 4.5px), radial-gradient(closest-side circle at 50%, rgb(89, 96, 72) 99%, transparent 100%);
		-webkit-mask-size: 100%, 2px 4px;
		-webkit-mask-repeat: repeat, repeat-y;
		-webkit-mask-position: 0 -4px, 87px;
		-webkit-mask-composite: source-out;
		mask-composite: subtract;
		// background: linear-gradient(45deg, rgb(89, 96, 72));
	}

	.card-left {
		width: 110rpx;
		height: 110rpx;
		text-align: center;
		font-size: 25rpx;
		color: #fff;
		padding-left: 30rpx;
	}

	.card-right {
		padding: 32rpx 40rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.card-info {
		text-align: right;
		margin: 0;
		font-size: 14px;
		line-height: 20px;
		color: #fff;
	}

	.card-time {
		font-size: 12px;
		line-height: 16px;
		font-weight: normal;
		color: #fff;
		margin-top: 4px;
	}

	.search {
		position: fixed;
		width: calc(100% - 260rpx);
		z-index: 100;
		top: 0;
		justify-content: space-between;
		// position: absolute;
		// top: 130rpx;
		// z-index: 22;
		// left: 50%;
		// transform: translateX(-50%);
		// width: 600rpx;
		transition: all .3s;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		padding-right: 220rpx;
		font-size: 24rpx;
		// justify-content: space-around;
		padding-bottom: 20rpx;

		&.active {
			background-color: #fff;
		}

		.input {
			border: 2rpx solid #eee;
			background-color: #eee;
			border-radius: 30rpx;
			padding: 4rpx 20rpx 4rpx 60rpx;
			width: 180rpx;
		}

		.cart {
			margin-left: 10rpx;
			position: relative;

			.number {
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				line-height: 24rpx;
				border-radius: 50%;
				left: 70%;
				text-align: center;
				background-color: red;
				font-size: 16rpx;
				color: #fff;
			}
		}
	}

	.text-nav {
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
	}

	.dian {
		position: absolute;
		right: 40rpx;
		bottom: 60rpx;
		z-index: 33;
		display: flex;

		.li {
			width: 18rpx;
			height: 18rpx;
			background-color: rgba(62, 62, 62, .6);
			border-radius: 50%;
			margin-right: 10rpx;

			&.active {
				background-color: #fff;
			}

		}
	}

	.text-nav .text-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-around;
		align-content: center;
		align-items: center;
		padding: 16rpx;
		box-sizing: border-box;
	}

	.text-nav .text-item image {
		margin-bottom: 10rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.text-nav .text-item text {
		display: block;
		height: 50rpx;
		line-height: 50rpx;
	}

	video {
		width: 100%;
	}

	.fl-one {
		padding: 0 20rpx;
	}

	.box-two {
		background-color: #fff;
		margin-right: 20rpx;

		.top {
			width: 500rpx;
			border-radius: 12rpx;
			background-color: #000;
			padding: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 3;

			.left {
				color: #fff;
				font-size: 24rpx;
			}
		}

		.item {
			background-color: #fff;
			position: relative;
			border-radius: 12rpx;


			.li {
				padding: 0 26rpx;

				.number {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 40rpx;
					font-weight: 900;
					// font-style: italic;

					.body {
						width: 240rpx;
						// flex: 1;
						color: #333;

						view {
							font-size: 24rpx;
						}

					}
				}

				.number:nth-of-type(1) .number {
					color: #171615;
				}

				.number:nth-of-type(2) .number {
					color: rgb(187, 187, 189);
				}

				.number:nth-of-type(3) .number {
					color: rgb(205, 160, 88);
				}
			}
		}
	}

	.box-text {
		background: #fff
	}

	.video-list {
		padding: 0 20rpx;

		.items {
			margin-right: 20rpx;

			.item {
				overflow: hidden;

				width: 560rpx;
				height: 300rpx;

				video {
					border-radius: 10rpx;
					height: 100%;
				}
			}
		}

	}

	.boxs-list {
		padding: 0 20rpx;
		overflow: hidden;

		.box {
			margin-right: 20rpx;
			position: relative;

			.text {
				padding: 30rpx;
				position: absolute;
			}

			img {
				border-radius: 10rpx;
				width: 450rpx;
				height: 700rpx;
			}
		}
	}

	.public-list {
		padding: 0 20rpx 30rpx;
		margin-top: 20rpx;

		.item {
			border-radius: 12rpx;
			background-color: #fff;
			margin-right: 20rpx;

			img {
				width: 340rpx;
				height: 340rpx;
			}

			.bottom {
				padding: 0 30rpx 40rpx;
			}
		}
	}

	.video-box {
		padding: 0 20rpx;

		.po {
			position: absolute;
			z-index: 3;
		}

		.bottom-box {
			box-sizing: border-box;
			padding: 0 30rpx;
			display: flex;
			width: 100%;
			bottom: 60rpx;
			justify-content: space-between;
			align-items: center;

			.left {
				color: rgba(255, 255, 255, 0.45);
			}

			.right {
				border-radius: 40rpx;
				padding: 14rpx 40rpx;
				background-color: #fff;
				color: #3b3e40;
				font-size: 20rpx;
			}
		}

		.top-box {
			color: #fff;
			padding: 20rpx;
			top: 0
		}

		position: relative;

		img {
			width: 600rpx;
			border-radius: 12rpx;
			height: 700rpx;
		}
	}

	navigator {
		padding: 20rpx;
		color: #fff;
		// background: $base-color;
		margin: 20rpx 0;
	}

	.wap-floating,
	.uni-popup__wrapper-box {
		.image-wrap {
			width: 480rpx;

			image {
				width: 100%;
				border-radius: 40rpx;
			}
		}

		text {
			display: block;
			font-size: 60rpx;
			color: #ffffff;
		}
	}

	.uni-popup__wrapper-box {
		text-align: center;
		overflow: initial !important;
		background: none !important;
		vertical-align: middle;
		background: none;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.item-fx {
		display: flex;
		overflow: scroll;

		.item {
			position: relative;
			margin-right: 30rpx;
		}
	}

	.new-list {

		padding: 0 20rpx;
		// padding-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		justify-content: space-between;
		// overflow: scroll;

		.box {
			// margin-right: 20rpx;
			position: relative;
			width: 48%;
			margin-bottom: 30rpx;
			border: 2rpx solid #e3e3e3;
			border-radius: 15rpx;

			.bc {
				height: 80rpx;
				margin-top: -80rpx;
			}

			view {
				img {
					display: block;
					border-radius: 15rpx;
				}
			}

			.top {
				img {
					// height: 720rpx;
					width: 100%;

				}
			}

			.tp {
				border-radius: 12rpx;
			}

			.bottom {
				// border-radius: 12rpx;
				border-bottom-left-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
				padding: 20rpx;
				// position: absolute;
				// bottom: 0;
				// width: 100%;
				box-sizing: border-box;
				// padding-bottom: 45rpx;

				.h {
					font-size: 56rpx;
					color: #fff;
					font-weight: 500;
				}

				.t {
					// color: rgba(255, 255, 255, .65);
					font-size: 26rpx;
				}

				.btn {
					display: flex;
					margin-top: 65rpx;
					justify-content: space-between;
					align-items: center;

					.left {

						font-size: 32rpx;
						color: #fff;
					}

					.right {
						// padding: 18rpx 30rpx;
						background-color: #fff;
						border-radius: 50rpx;
						color: #d38d00;
						font-size: 30rpx;
						font-weight: 700;
					}
				}
			}
		}

	}

	.box-header {
		font-size: 46rpx;
		padding: 0 20rpx;
		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.box-header-right {
		background-color: #e3e3e3;
		border-color: #3e3e3e;
		border-radius: 30rpx;
		padding: 12rpx 20rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;

		img {
			margin-left: 12rpx;
			width: 12px;
			height: 12px;
			filter: brightness(.1);
		}
	}

	.box-header-left {
		font-size: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, .85);
		letter-spacing: 3rpx;
		line-height: 80rpx;
	}

	.kefu {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		border: none;
		background-color: #607d8b;
		padding: 0;
		margin: 0;
		z-index: 10;
	}

	.kf-img {
		width: 100rpx;
		height: 100rpx;
		z-index: 100;
	}

	.fl-item {
		background-color: #eeeeee75;
		padding: 0 10rpx;
		margin-right: 0rpx;
		position: relative;
		border-radius: 10rpx;
	}

	.fl-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.fl-box {
		display: flex;
		overflow: scroll;
	}

	.box-two {}

	.fl-item-title {
		left: 0;
		position: absolute;
		bottom: 18rpx;
		font-weight: 700;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		width: 100%;
	}

	.icon-sousuo {
		position: absolute;
		left: 55rpx;
	}
</style>